<template>
  <view>
    <view class="recommendContainer">
      <!-- 头部区域 -->
      <my-navHead title="推荐歌曲" nav="为你精心推荐" />
      <!-- 内容区 -->
      <scroll-view class="recommendScroll" scroll-x enable-flex>
        <view class="scrollItem" v-for="item in recommendList" :key="item.id">
          <image :src="item.picUrl"></image>
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-recommend',
  props: {
    recommendList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss">
/* 推荐歌曲 */
.recommendContainer {
  padding: 20rpx;

  .recommendScroll {
    display: flex;
    height: 300rpx;
  }

  .scrollItem {
    width: 200rpx;
    margin-right: 20rpx;
  }

  .scrollItem image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
  }

  .scrollItem text {
    font-size: 26rpx;
    /* 单行文本溢出隐藏 省略号代替 */
    /*display: block;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/

    /* 多行文本溢出隐藏 省略号代替*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*设置对其模式*/
    -webkit-line-clamp: 2;
    /*设置多行的行数*/
  }
}
</style>
